<template>
  <a-form
    ref="formRef"
    name="search_form"
    class="search-form"
    layout="inline"
    v-bind="attrs"
  >
    <slot />
    <a-form-item>
      <a-button type="primary" html-type="submit" @click="search">
        <template #icon>
          <SearchOutlined />
        </template>查询
      </a-button>
      <a-button @click="reset">
        <template #icon>
          <undo-outlined />
        </template>
        重置
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
export default {
	inheritAttrs: false
}
</script>

<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue/es';
const attrs = useAttrs()
const emit = defineEmits(['search'])
function search() {
  emit('search', true)
}

const formRef = $ref<FormInstance>()
function reset() {
  formRef.resetFields()
  nextTick(() => {
    search()
  })
}
</script>

<style lang="less">
.search-form {
  .ant-btn + .ant-btn {
    margin-left: 8px;
  }
  .ant-form-item {
    margin-bottom: 20px;
  }
  .ant-form-item:last-child {
    margin-right: 0;
  }
}
</style>